<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			img{
				width: 200px;
				position: absolute;
				transition: all 1s;
				z-index: 0;
				padding: 10px;
				border: 1px solid #ccc;
				box-sizing: border-box;
				background: #ffffff;
			}
			div{
				position: relative;
				width: 1500px;
				margin: 0px auto;
			}
			
			img:nth-child(1){
				top: 0px;
				left: 130px;
				transform: rotate(-15deg);
				z-index: 0;
			}
			img:nth-child(2){
				top: 40px;
				left: 270px;
				transform: rotate(30deg);
			}
			img:nth-child(3){
				top: 40px;
				left: 420px;
				transform: rotate(-45deg);
			}
			img:nth-child(4){
				top: 20px;
				left: 570px;
				transform: rotate(35deg);
			}
			img:nth-child(5){
				top: 200px;
				left: 570px;
				transform: rotate(-25deg);
			}
			img:nth-child(6){
				top: 260px;
				left: 440px;
				transform: rotate(15deg);
			}
			img:nth-child(7){
				top: 190px;
				left: 300px;
				transform: rotate(50deg);
				z-index: 1;
			}
			img:nth-child(8){
				top: 170px;
				left: 140px;
				transform: rotate(-26deg);
			}
			img:nth-child(9){
				top: 140px;
				left: 530px;
				transform: rotate(-26deg);
			}
			img:nth-child(10){
				top: 140px;
				left: 20px;
				transform: rotate(-26deg);
			}
			img:hover{
				transform: scale(1.5)  rotate(0deg);
				z-index:3;
				box-shadow: 6px 6px 6px #ccc;
				
				
				
			}
			
			
		</style>
	</head>
	<body>
		<div>
			<img src="img1/1.jpg" />
			<img src="img1/2.jpg" />
			<img src="img1/3.jpg" />
			<img src="img1/4.jpg" />
			<img src="img1/5.jpg" />
			<img src="img1/6.jpg" />
			<img src="img1/7.jpg" />
			<img src="img1/8.jpg" />
			<img src="img1/9.jpg" />
			<img src="img1/10.jpg" />
		</div>
	</body>
</html>
